import { defineComponent, shallowRef } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  name: 'voiceComponent',
  props: {
    modelValue: {
      type: Object,
      required: true,
    },
  },
  setup() {
    const label = shallowRef('')
    const dialogVisible = shallowRef(false)

    const openDialog = () => {
      dialogVisible.value = true
    }

    return () => (
      <>
        <a-input
          v-model:value={label.value}
          placeholder="请选择音色"
          readOnly
          onClick={openDialog}
          v-slots={{
            suffix: () => (
              <>
                <DownOutlined
                  class={{
                    'transition-transform duration-300': true,
                    'transform-rotate-180': dialogVisible.value,
                  }}
                />
              </>
            ),
          }}
        ></a-input>
        <a-modal v-model:open={dialogVisible.value} title="选择音色" centered>
          <p>Some contents...</p>
        </a-modal>
      </>
    )
  },
})
